<template>
    <div class="common-table-container">
        <el-table
            :data="tableData"
            class="common-table"
            :header-row-style="setTableHeaderRowStyle"
            :header-cell-style="setTableHeaderCellStyle"
            :cell-style="setTableCellStyle"
            :max-height="maxHeight ? maxHeight : '500px'"
        >
            <slot></slot>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { setTableCellStyle, setTableHeaderCellStyle, setTableHeaderRowStyle } from '@/util/util';
import { ref } from 'vue';

interface Props {
    /**
     * 表格数据
     */
    tableData: any[];
    /**
     * 表格最大高度
     */
    maxHeight?: string | number;
}

const props = defineProps<Props>();
</script>

<style scoped lang="scss">
.common-table-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;

    .common-table {
        width: 100%;
        margin-bottom: 15px;
        /* 为表格底部添加间距 */

        /* 确保固定表头样式正确 */
        :deep(.el-table__header-wrapper) {
            th {
                background-color: var(--el-table-header-bg-color);
            }
        }

        /* 修正固定表头后的滚动条样式 */
        :deep(.el-scrollbar__bar.is-horizontal) {
            height: 6px;
        }

        :deep(.el-scrollbar__bar.is-vertical) {
            width: 6px;
        }
    }
}
</style>
